import { useNavigate } from 'react-router-dom'
import { Link } from 'react-router-dom'
import { agreePrivacy } from '../api/index.js'

export default function ConsentModal() {
  const navigate = useNavigate()
  
  const onAccept = async () => {
    try {
      await agreePrivacy();
      navigate('/form')
    } catch (error) {
      console.error('调用agreePrivacy接口失败:', error);
      navigate('/form')
    }
  }
  
  const exit = () => {
    weixinClosePage();
  }
  function weixinClosePage() {
    if (typeof WeixinJSBridge == "undefined") {
        if (document.addEventListener) {
            document.addEventListener('WeixinJSBridgeReady', weixin_ClosePage, false);
        } else if (document.attachEvent) {
            document.attachEvent('WeixinJSBridgeReady', weixin_ClosePage);
            document.attachEvent('onWeixinJSBridgeReady', weixin_ClosePage);
        }
    } else {
        weixin_ClosePage();
    }
  }
  function weixin_ClosePage() {
      WeixinJSBridge.call('closeWindow');
  }

  return (
    <div className="w-[100vw] h-[100vh] absolute bottom-[0] left-[0px]">
      <div className="absolute w-[100vw] h-[100vh] inset-0 bg-[#2E2E2E]/66"></div>

      <div className="w-[100vw] h-[auto] absolute z-99 bottom-[0] left-[0px] rounded-tl-[30px] rounded-tr-[30px] gap-[44px] opacity-100 rotate-0 bg-[#FFFFFF] shadow-xl flex flex-col pb-[30px]">
        <div className="pt-[35px] px-[30px]">

          <h2 className="text-[18px] text-center font-semibold mb-2 text-[#2F2F2F] mb-[23px]">用户须知</h2>
          <div className="text-[16px] text-center text-[#2F2F2F] leading-[200%]">
          欢迎使用“upm活动服务”，我们非常重视您的个人信息和隐私保护。在您使用“upm活动服务”之前，请仔细阅读
            <Link to="/privacy" className="text-[#3C8149] mx-1">《用户隐私政策》</Link>
            和
            <Link to="/terms" className="text-[#3C8149] mx-1">《用户服务协议》</Link>
            我们将按照您同意的条款使用您的个人信息，以便为您提供服务。
          </div>
          <div className="text-[#6C6C6C] text-[13px] pt-[23px]">如您同意此政策，请点击“同意"并开始使用我们的产品和服务，我们尽全力保护您的个人信息安全。</div>
          <div className="flex justify-center gap-2 mt-[44px] gap-[14px]">
            <button className="inline-block px-4 py-2 rounded-[100px] bg-blue-600 text-[#67686A] border border-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 bg-[#EFF0F2] w-[164px] h-[49px] flex items-center justify-center" onClick={exit}>退出</button>
            <button className="inline-block px-4 py-2 rounded-[100px] bg-blue-600 text-[#FFFFFF] border border-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 bg-[#3C8149] w-[164px] h-[49px] flex items-center justify-center" onClick={onAccept}>同意</button>
          </div>
        </div>
      </div>
    </div>
  )
}